<template>
  <div>
    <el-card>
      <el-row justify="space-between">
        <el-col class="passList_title" :span="16">
          <img :src="require('../../assets/img/fasco.png')" alt />
          申请单详情/Order Information
        </el-col>
      </el-row>
      <el-row class="trevaler_info">
        <el-col :span="12">
          <el-row>
            <el-col :span="8">申请人/Applicant:</el-col>
            <el-col class="bold" :span="6">陈旻</el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">成本中心/Cost Center:</el-col>
            <el-col class="bold" :span="12">市场部/Marketing</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="trevaler_info">
        <el-col :span="12">
          <el-row>
            <el-col :span="8">员工号/Staff No:</el-col>
            <el-col class="bold" :span="12">EY9851</el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">出差目的/Travel Purpose:</el-col>
            <el-col class="bold" :span="12">培训/Training</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row justify="space-between">
        <el-col class="passList_title" :span="16">
          <img :src="require('../../assets/img/fasco.png')" alt />
          交通/Transportation
        </el-col>
      </el-row>
      <el-collapse v-if='trevalInfo.flist.length !==0' class="travel_slider" value="1">
        <el-collapse-item name="1">
          <template slot="title">
            <el-row class="title1" justify="space-between">国内航班/Domestic Air</el-row>
          </template>
          <el-row class="title1 title_name">
            <i class="el-icon-user"></i>刘博
          </el-row>
          <el-row class="travel_info">
            <el-col :span="1">-</el-col>
            <el-col :span="10">
              <el-row class="orderInfo orderInfo1">
                <el-col class="airinfo" :span="8">
                  <img :src="require('../../assets/img/MU.png')" alt />
                  <span>东方航空 MU5101</span>
                </el-col>
                <el-col class="airinfo" :span="4">
                  <i class="el-icon-time"></i>
                  <span>2H20M</span>
                </el-col>
                <el-col class="airinfo" :span="4">
                  <span>1027KM</span>
                </el-col>
                <el-col class="airinfo" :span="8">
                  <a>退改政策/Policy</a>
                </el-col>
              </el-row>
              <el-row class="orderInfo final">
                <el-col class="airinfotime" :span="6">
                  <p>
                    2020-08-09
                    <br />08:00
                  </p>
                  <p style="margin-top:54px">
                    2020-08-09
                    <br />08:00
                  </p>
                </el-col>
                <el-col class="airinfo" :span="12">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in activities"
                      :key="index"
                      :timestamp="activity.timestamp"
                    >{{activity.content}}</el-timeline-item>
                  </el-timeline>
                </el-col>
              </el-row>
            </el-col>
            <el-col class="travel_info_right" :span="12">
              <el-row>
                <el-col :span="12">成本中心/Cost Center</el-col>
                <el-col class="right" :span="12">市场部/Marketing</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">出差目的/Travel Purpose</el-col>
                <el-col class="right" :span="12">培训/Training</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">备注信息/Remark</el-col>
                <el-col class="right" :span="12"></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">最低参考票价/Lowest Price:</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-tag type="warning">违</el-tag>
                </el-col>
                <el-col class="right" :span="12">
                  FA
                  <a>查看更多/Show More</a>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">经济舱/Economy Class</el-col>
                <el-col class="right fare" :span="12">¥860.00</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-if='trevalInfo.tlist.length !==0' class="travel_slider" value="1">
        <el-collapse-item name="1">
          <template slot="title">
            <el-row class="title1" justify="space-between">火车/Train</el-row>
          </template>
          <el-row class="title1 title_name">
            <i class="el-icon-user"></i>刘博
          </el-row>
          <el-row class="travel_info">
            <el-col :span="1">-</el-col>
            <el-col :span="10">
              <el-row class="orderInfo orderInfo1">
                <el-col class="airinfo" :span="8">
                  <img :src="require('../../assets/img/MU.png')" alt />
                  <span>东方航空 MU5101</span>
                </el-col>
                <el-col class="airinfo" :span="4">
                  <i class="el-icon-time"></i>
                  <span>2H20M</span>
                </el-col>
                <el-col class="airinfo" :span="4">
                  <span>1027KM</span>
                </el-col>
                <el-col class="airinfo" :span="8">
                  <a>退改政策/Policy</a>
                </el-col>
              </el-row>
              <el-row class="orderInfo final">
                <el-col class="airinfotime" :span="6">
                  <p>
                    2020-08-09
                    <br />08:00
                  </p>
                  <p style="margin-top:54px">
                    2020-08-09
                    <br />08:00
                  </p>
                </el-col>
                <el-col class="airinfo" :span="12">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in activities"
                      :key="index"
                      :timestamp="activity.timestamp"
                    >{{activity.content}}</el-timeline-item>
                  </el-timeline>
                </el-col>
              </el-row>
            </el-col>
            <el-col class="travel_info_right" :span="12">
              <el-row>
                <el-col :span="12">成本中心/Cost Center</el-col>
                <el-col class="right" :span="12">市场部/Marketing</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">出差目的/Travel Purpose</el-col>
                <el-col class="right" :span="12">培训/Training</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">备注信息/Remark</el-col>
                <el-col class="right" :span="12"></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">最低参考票价/Lowest Price:</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-tag type="warning">违</el-tag>
                </el-col>
                <el-col class="right" :span="12">
                  FA
                  <a>查看更多/Show More</a>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">经济舱/Economy Class</el-col>
                <el-col class="right fare" :span="12">¥860.00</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-if='trevalInfo.hlist.length !==0' class="travel_slider" value="1">
        <el-collapse-item name="1">
          <template slot="title">
            <el-row class="title1" justify="space-between">酒店住宿/Hotel</el-row>
          </template>
          <el-row class="title1 title_name">
            <i class="el-icon-user"></i>刘博
          </el-row>
          <el-row class="travel_info">
            <el-col :span="1">-</el-col>
            <el-col :span="10">
              <el-row class="orderInfo orderInfo1">
                <el-col class="airinfo" :span="8">
                  <img :src="require('../../assets/img/MU.png')" alt />
                  <span>东方航空 MU5101</span>
                </el-col>
                <el-col class="airinfo" :span="4">
                  <i class="el-icon-time"></i>
                  <span>2H20M</span>
                </el-col>
                <el-col class="airinfo" :span="4">
                  <span>1027KM</span>
                </el-col>
                <el-col class="airinfo" :span="8">
                  <a>退改政策/Policy</a>
                </el-col>
              </el-row>
              <el-row class="orderInfo final">
                <el-col class="airinfotime" :span="6">
                  <p>
                    2020-08-09
                    <br />08:00
                  </p>
                  <p style="margin-top:54px">
                    2020-08-09
                    <br />08:00
                  </p>
                </el-col>
                <el-col class="airinfo" :span="12">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in activities"
                      :key="index"
                      :timestamp="activity.timestamp"
                    >{{activity.content}}</el-timeline-item>
                  </el-timeline>
                </el-col>
              </el-row>
            </el-col>
            <el-col class="travel_info_right" :span="12">
              <el-row>
                <el-col :span="12">成本中心/Cost Center</el-col>
                <el-col class="right" :span="12">市场部/Marketing</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">出差目的/Travel Purpose</el-col>
                <el-col class="right" :span="12">培训/Training</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">备注信息/Remark</el-col>
                <el-col class="right" :span="12"></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">最低参考票价/Lowest Price:</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-tag type="warning">违</el-tag>
                </el-col>
                <el-col class="right" :span="12">
                  FA
                  <a>查看更多/Show More</a>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">经济舱/Economy Class</el-col>
                <el-col class="right fare" :span="12">¥860.00</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-card class="gross">
      <el-row>
        <el-col class="title" :span="12">订单总金额</el-col>
        <el-col class="right allfare" :span="11">¥10,458.00</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">现付/Postpay</el-col>
        <el-col class="right fare" :span="11">¥560.00</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">对公结算/Corporate Settlement</el-col>
        <el-col class="right fare" :span="11">¥9,248.00</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">审批时限/Approve Before</el-col>
        <el-col class="right fare" :span="11">2020-09-08 16:00</el-col>
      </el-row>
      <el-row>
        <el-button @click="goPay" type="primary">去支付/Payment</el-button>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { log } from "util";
export default {
  data() {
    return {
      trevalInfo: {},
      activities: [
        {
          content: "上海虹桥机场",
          timestamp: "ShangHaiHongQiaoAirport",
        },
        {
          content: "北京首都机场",
          timestamp: "ShangHaiHongQiaoAirport",
        },
      ],
    };
  },
  methods: {
    goPay() {
      const rLoading = this.$loading();

      setTimeout(() => {
        rLoading.close();
        this.$router.push({
          path: "/payment",
        });
      }, 500);
    },
  },
  created() {
    this.trevalInfo = JSON.parse(sessionStorage.getItem("currentTravelInfo"));
  },
};
</script>
<style lang="less" scoped>
.el-card {
  font-size: 18px;
  color: #212121;
  margin-bottom: 10px;

  a {
    color: #3996f3;
    margin-left: 10px;
  }
  .trevaler_info {
    margin: 10px 20px 0 30px;
  }
  .el-timeline-item {
    padding-bottom: 54px;
  }
  .travel_info_right {
    border-left: 1px solid #ccc;
    padding-left: 20px;
    .el-row {
      margin-bottom: 10px;
    }
  }
  .bold {
    font-weight: 600;
  }

  .title {
    font-size: 22px;
    font-weight: 500;
    color: rgba(7, 59, 131, 1);
    line-height: 30px;
  }
  .title1 {
    margin: 10px 20px 0 30px;
    font-size: 20px;
    font-weight: 500;
    color: rgba(7, 59, 131, 1);
  }
  .title_name {
    color: #212121;
    font-weight: 600;
    margin-bottom: 10px;
    i {
      margin-right: 15px;
    }
  }
  .fare {
    color: #ff7600;
    font-weight: 500;
    font-size: 20px;
  }
  .allfare {
    color: #ff7600;
    font-weight: 600;
    font-size: 22px;
  }
  .right {
    text-align: right;
  }
  .orderInfo1 {
    margin: 10px 0;
  }

  .orderInfo {
    color: #212121;
    line-height: 18px;
    .airinfo {
      display: flex;
      align-items: center;

      img {
        width: 18px;
        height: 18px;
      }
      span {
        margin-left: 15px;
      }
    }

    .airinfotime {
      color: #303133;
      font-size: 14px;
    }
  }
}
.gross {
  background: #eff7fd;
  border: 1px solid #4284c9;
  .el-row {
    margin-bottom: 15px;
    // margin-right: 50px;
  }
}

.el-collapse-item /deep/ .el-collapse-item__content {
  padding-bottom: 0px;
  font-size: 14px;
}
</style>
